$(function () {
  // let _this = this;
  // 在js里面起变量名称
  // 函数就是动词 goLogin   普通变量就是名称 boxDom
  // 1. 给去登录 去注册绑定事件， 切换box盒子区域
  $('#goRegistry').on('click', function () {
    $('.login-box').hide();
    $('.registry-box').show();
    // 如果显示的是注册，那么高度就要高一点
    // 如果显示的是登录，那么高度就要矮一点
    $('.login-and-registry').css('height', '300px');
  });
  $('#goLogin').on('click', function () {
    $('.login-box').show();
    $('.registry-box').hide();
    $('.login-and-registry').css('height', '240px');
  });

  // 如果需要使用layui 的自定义规则，那么下面这句话一定不能少
  let form = layui.form;
  let layer = layui.layer;
  form.verify({
    username: function (value, item) {
      //value：表单的值、item：表单的DOM对象
      if (!new RegExp('^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$').test(value)) {
        return '用户名不能有特殊字符';
      }
      if (/(^\_)|(\__)|(\_+$)/.test(value)) {
        return "用户名首尾不能出现下划线'_'";
      }
      if (/^\d+\d+\d$/.test(value)) {
        return '用户名不能全为数字';
      }
    },

    //我们既支持上述函数式的方式，也支持下述数组的形式
    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
    pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
    repass: function (value) {
      if ($('.registry-box [name=password]').val() != value) {
        return '两次输入密码不一样，请重新输入';
      }
    },
  });

  // 给表单登录绑定事件, 应该是给表单元素 绑定submit，不是按钮
  $('#login-form').on('submit', function (e) {
    // 1. 先阻止默认行为
    e.preventDefault();
    // 2. 获取用户输入的 用户名和密码;  属性选择器的使用
    let username = $('.login-box [name=username]').val();
    let password = $('.login-box [name=pwd]').val();
    // debugger;
    // 3. 发请求登录 --- 只要是发请求，就是差文档
    $.ajax({
      url: '/api/login',
      method: 'POST',
      data: {
        username: username,
        password: password,
      },
      success: function (res) {
        console.log(res);
        if (res.status === 0) {
          // 这个是后面要使用的token值
          localStorage.setItem('bigToken', res.token);
          location.href = 'index.html';
        } else {
          layer.msg(res.message, { icon: 2 });
        }
      },
    });
  });

  // 给表单注册绑定事件
  // 我们要使用表单元素dom对象  来绑定submit事件， 不能使用 button绑定
  // 如果表单的事件这里监听没有效果： 1. 将form元素上面的 action去掉，添加一个id属性  2. 将button上面的 type="button" 去掉
  $('#regitry-form').on('submit', function (e) {
    e.preventDefault();
    // // 阻止表单提交的默认行为， 禁用表单的同步提交， 因为会闪烁一下，体验不好
    // e.preventDefault();

    // // 发请求之前，一定要先获取参数
    // // 我们在拿到用户输入的值的时候，变量名，尽量和接口文档的请求参数名称一致
    // // 选择器采用的 属性选择器，减少一些无用的id和类名的定义
    let username = $('.registry-box [name=username]').val();
    let password = $('.registry-box [name=password]').val();
    console.log(username, password);

    // 根据接口文档，来发起请求
    // 如果xhr请求 出现红色的 报404 的错误，就是我们请求的地址写错了，找不到对应的接口
    $.post('/api/reguser', { username, password }, function (res) {
      console.log(res);
      if (res.status === 0) {
        // 模拟的人点击 去登录 这个按钮， 跳转到登录的盒子
        $('#goLogin').click();
      } else {
        layer.msg(res.message, { icon: 2 });
      }
    });

    // $.ajax({
    //   url: '',
    //   method: 'POST',
    //   data: {},
    //   success(){}
    // })
  });
});
